import { createContext, FC } from 'react';
import EditorWorkspace from './EditorWorkspace';
import useSetState, { SetState } from 'ahooks/lib/useSetState';

interface CanvasContext {
    canvas: fabric.Canvas | null;
    workspace: EditorWorkspace | null;
    openTools: boolean;
    openAttr: boolean;
    uploadDrawingOpen: boolean;
    selectDrawingOpen: boolean;
    drawMode: string;
    canvasLoading: boolean;
    refreshTooList: null | object;
    title: string;
    setState: SetState<CanvasContext>;
}

export const Context = createContext<CanvasContext>({
    canvas: null,
    workspace: null,
    openTools: false,
    openAttr: false,
    uploadDrawingOpen: false,
    selectDrawingOpen: false,
    drawMode: '',
    title: '',
    canvasLoading: false,
    refreshTooList: null,
    setState: () => {},
});

export const CanvasProvider: FC = ({ children }) => {
    const [state, setState] = useSetState<Omit<CanvasContext, 'setState'>>({
        canvas: null,
        workspace: null,
        selectDrawingOpen: false,
        openTools: true,
        uploadDrawingOpen: false,
        openAttr: false,
        drawMode: '',
        canvasLoading: false,
        refreshTooList: null,
        title: '',
    });

    const value: CanvasContext = {
        ...state,
        setState,
    };
    return <Context.Provider value={value}>{children}</Context.Provider>;
};
